<template>
	<view class="container">
		<view class="tab_box" >
			<view class="order_type_tab_box" v-if="userInfo.identity==1">
				<view :class="['order_type_tab_head',item.type===table.type? 'order_type_tab_head_active':'']"
					@click="tabChange(item)" v-for="item in tabOne" :key="item.type">
					<view class="type_text">{{item.name}}</view>
					<view class="active_type"></view>
				</view>
			</view>
			<view class="list_tab_box">
				<view :class="['list_tab_head',item.status===table.status? 'list_tab_head_active':'']"
					@click="handleChangeStatus(item)" v-for="item in tabStatus" :key="item.status">
					<view class="type_text">{{item.name}}
						<text v-if="item.status=='0'">({{approvalNum}})</text>
					</view>
					<view class="active_type"></view>
				</view>
			</view>
		</view>
		<view class="content" v-if="table.type==1">
			<view class="main">
				<view class="list_box" v-for="(item,index) in table.list" :key="index" @click="goDateils(item.id)">
					<view class="lf lf-between lf-center xjs-pb-40">
						<view class="left_text">编号：{{item.id}}</view>
						<view class="right_text">{{filterStatusText(item.status)}}</view>
					</view>
					<view class="head_text">
						<view class="lf lf-center">
							<view class="left_box">申请人：</view>
							<image class="avatar" :src="item.avatar"></image>
							<view>
								<view class="sqName">{{item.nickName}}</view>
								<view>ID：{{item.userId}}</view>
							</view>
						</view>
						<view class="lf lf-center xjs-mt-40 xjs-mb-40">
							<view class="left_box">实名信息：</view>
							<view>
								{{item.realName }} | {{item.sex==0?'女':'男'}} | {{item.age}}岁
							</view>
						</view>
						<view class="lf lf-center">
							<view class="left_box">提供服务：</view>
							<view>
								<text v-for="(val,valIndex) in item.serviceType.split(',')" :key="valIndex">
									<text>
										{{filterPetService(val)}}
									</text>
									<text v-if="valIndex<item.serviceType.split(',').length-1"> | </text>
								</text>
							</view>
						</view>
						<view class="lf lf-center xjs-mt-40">
							<view class="left_box">接单地址：</view>
							<view class="right_box">
								{{item.province}}{{item.city}}{{item.area}}{{item.locationAddress}}{{item.address}}
							</view>
						</view>
						<view class="lf lf-center xjs-mt-40">
							<view class="left_box">接单范围：</view>
							<view class="right_box">
								{{item.orderTakingRange}}KM
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="noRecord" v-if="table.loading">
				暂无记录～
			</view>
		</view>
		<view v-else class="content">
			<view class="list_box" v-for="(item,index) in table.list" :key="index" @click="goreview(item.id)">
				<view class="lf lf-between">
					<view class="xjs-size-30 xjs-weight-bold review_title">{{item.examName}}</view>
					<view :class="item.status==0?'review_text':'xjs-size-26'">{{filterStatusText1(item.status)}}</view>
				</view>
				<view class="course_box">
					<view>关联课程：</view>
					<!-- <image class="course_img" src="../../../../static/logo.png"></image> -->
					<view class="course_text">{{item.courseName}}</view>
				</view>
				<view class="user_box">
					<view class="lf lf-center">
						<view class="user_left">考生信息：</view>
						<view class="lf lf-center user_text">
							<image class="user_img" :src="item.avatar"></image>
							<view class="userInfo">
								<text class="xjs-size-30 xjs-ml-8">{{item.nickName}}</text>
								<text class="user_name" v-if="item.realName"> | {{item.realName}}</text>
							</view>
							
						</view>
						
					</view>
					<view class="lf xjs-mt-40 xjs-mb-40">
						<view class="user_left">交卷时间：</view>
						<view class="xjs-size-26">{{item.updateTime}}</view>
					</view>
					<view class="lf">
						<view class="user_left">考试得分：</view>
						<view class="xjs-size-26">{{item.score}}</view>
					</view>
				</view>
				<view class="xjs-btn-primary xjs-mt-40" v-if="item.status==0">立即批阅</view>
			</view>
			<view class="noRecord" v-if="table.loading">
				暂无记录～
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import {useStudioStoreToRefs} from '@/store/useStudioStore'
	const {studio,identity} = useStudioStoreToRefs()
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	import { reactive } from 'vue'
	import { onPullDownRefresh, onReachBottom, onShow,onLoad } from '@dcloudio/uni-app'
	import api from '@/api/index'
	let approvalNum = ref('0');
	const tabOne = reactive([
		{ name: '陪宠师申请', type: '1' },
		{ name: '陪宠师考试', type: '2' },
	])
	const tabStatus = reactive([
		{ name: '全部', status: '' },
		{ name: '待您审核', status: '0' },
		// { name: '已通过', status: '3' },
		// { name: '已拒绝', status: '2' }
	])
	const table = reactive<{
		loading : boolean
		list : []
		page : number
		limit : number
		finished : boolean
		type:number | string
		status : number | string
		studioId:number | string
	}>({
		loading: false,
		list: [],
		page: 1,
		limit: 10,
		finished: false,
		type:'1',
		status: '',
		studioId:'',
	})
	const goDateils = (id) => {
		uni.navigateTo({
			url: '/pages/myStudio/studio/applyForDetails/index?id='+id
		})
	}
	const goreview = (id) => {
		uni.navigateTo({
			url: '/pages/businessSchool/examDetails/index?id='+id
		})
	}
	const filterStatusText = (type) => {
		if(type == 0){
			return '待初审'
		}else if(type == 1){
			return '待缴纳'
		}else if(type == 3){
			return '终审通过'
		}else if(type == 2){
			return '初审拒绝'
		}else if(type == 4){
			return '终审拒绝'
		}else if(type == 5){
			return '待终审'
		}
	}
	const filterStatusText1 = (type) => {
		if(type == 0){
			return '待批阅'
		}else if(type == 1||type == 5){
			return '已通过'
		}else if(type == 2){
			return '批阅未通过'
		}else if(type == 3){
			return '考试未通过'
		}
	}
	const filterPetService = (type) => {
		if(type == 1){
			return '上门喂养'
		}else if(type == 2){
			return '上门遛狗'
		}else if(type == 3){
			return '基础清洁'
		}
	}
	
	const getPendingApprovalNum = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/apply-studio-record/getPendingApprovalNum/${studio.value.id}`
		})
		approvalNum.value = res.data
		
	}
	const getPendingApprovalNum1 = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/exam/exam-record/getWaitCount`,
			data:{
				studioId:studio.value.id
			}
		})
		approvalNum.value = res.data
		
	}
	// 获取数据
	const onDataGet = () => {
		let status = table.status
		return new Promise(async (resolve, reject) => {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			try {
				const res:any = await api({
					method: 'get',
					contentType: 'json',
					url: table.type==1?'/mall/studio/apply-studio-record/getPageToStudio':'/mall/exam/exam-record/page',
					data: {
						page: table.page,
						limit: table.limit,
						status: status,
						studioId:studio.value.id
					}
				})
				if (res.data.records.length != 0) {
					table.list = table.list.concat(res.data.records);
					table.finished = true
				}else{
					table.finished = false
				}
				if (table.list.length <= 0) {
					table.loading = true
				}
				uni.hideLoading()
				resolve(true)
			} catch (error) {
				uni.hideLoading()
				table.loading = false
				table.finished = true
				reject(false)
			}
			uni.hideLoading()
		})
	}

	// 数据初始化
	const onDataInit = async () => {
		table.finished = false
		table.page = 1
		table.list = []
		table.loading = false
	}
	const tabChange = async(item : any)=>{
		table.status = ''
		table.type = item.type
		if(item.type==1){
			getPendingApprovalNum()
		}else{
			getPendingApprovalNum1()
		}
		
		scrollToTop()
		onDataInit()
		onDataGet()
	}
	const handleChangeStatus = async (item : any) => {
		table.status = item.status
		scrollToTop()
		onDataInit()
		onDataGet()
	}
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
	// 页面下拉刷新
	onPullDownRefresh(async () => {
		console.log('onPullDownRefresh');
		if (table.loading) {
			uni.stopPullDownRefresh()
		} else {
			try {
				await onDataInit()
				await onDataGet()
			} catch (error) {
			}
			uni.stopPullDownRefresh()
		}
	})
	// 触底
	onReachBottom(() => {
		if (table.finished && !table.loading) {
			table.page++
			onDataGet()
		}
	})
	onLoad((e)=>{
		table.type = e.type
	})
	onShow(()=>{
		onDataInit()
		onDataGet()
		if(table.type==1){
			getPendingApprovalNum()
		}else{
			getPendingApprovalNum1()
		}
	})
</script>

<style lang="scss" scoped>
	.act {
		color: #6363FF;
	}
	.linehei1{
		line-height: 1;
	}
	.userInfo{
		width: 380rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.noRecord{
		margin-top: 30%;
		text-align: center;
		font-size: 32rpx;
	}
	.tab_box{
		position: sticky;
		top: 0;
		z-index: 1;
	}
	.order_type_tab_box {
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 88rpx;
		padding: 0 160rpx;
		box-sizing: border-box;
		border-top: 1px solid #F5F6F7;
	}
	.list_tab_box{
		display: flex;
		justify-content: space-around;
		width: 100%;
		background-color: #F9F6F6;
		box-sizing: border-box;
		padding: 32rpx 0;
	}
	.list_tab_head{
		width: 188rpx;
		height: 58rpx;
		line-height: 58rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		font-size: 26rpx;
		
	}
	.list_tab_head_active{
		.type_text {
			font-weight: bold;
			font-size: 26rpx;
			color: #F87C90;
			border: 1rpx solid #F87C90;
			width: 188rpx;
			height: 58rpx;
			line-height: 58rpx;
			background: #FFFFFF;
			border-radius: 50rpx;
			text-align: center;
		}
	}
	.order_type_tab_head {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 88rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;

		.type_text {
			font-weight: 400;
			font-size: 30rpx;
			height: 100%;
			color: #5C5E5E;
			text-align: center;
		}

	}

	.order_type_tab_head_active {
		.type_text {
			font-weight: bold;
			font-size: 32rpx;
			color: #1B2120;
		}

		.active_type {
			bottom: 0;
			width: 44rpx;
			height: 8rpx;
			background: var(--color-primary);
			border-radius: 4rpx;
		}
	}
	.lf {
		display: flex;
	}

	.lf-between {
		justify-content: space-between;
	}

	.lf-center {
		align-items: center;
	}

	.container {
		padding-bottom: var(--safe-area-bottom);
	}
	.content {
		.time_box {
			display: flex;
			justify-content: space-between;
			margin: 32rpx 32rpx 24rpx 32rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 0 32rpx;
		}

		.time_text {
			font-weight: bold;
			font-size: 32rpx;
		}

		.revenue {
			color: #7C807F;
			font-size: 26rpx;
		}

		.list_box {
			border-radius: 24rpx;
			background: #FFFFFF;
			padding: 40rpx 32rpx;
			align-items: center;
			margin: 0rpx 32rpx 24rpx 32rpx;
			.left_text{
				color: #7C807F;
				font-size: 30rpx;
			}
			.right_text{
				color: #FF6084;
				font-size: 26rpx;
				font-weight: bold;
			}
			.review_title{
				width: 460rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.review_text{
				color: #FF6084;
				font-size: 26rpx;
			}
			.course_box{
				display: flex;
				align-items: center;
				background-color: #F8F8F8;
				border-radius: 24rpx;
				font-size: 26rpx;
				padding: 24rpx 24rpx;
				margin: 40rpx 0 16rpx 0;
				.course_img{
					width: 114rpx;
					height: 64rpx;
					margin: 0 12rpx;
				}
				.course_text{
					width: 284rpx;
				}
			}
			.user_box{
				background-color: #F8F8F8;
				border-radius: 24rpx;
				padding: 32rpx 24rpx;
				.user_left{
					width: 132rpx;
					color: #7C807F;
					font-size: 26rpx;
				}
				.user_img{
					display: block;
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}
				.user_text{
					width: 438rpx;
				}
				.user_name{
					color: #5C5E5E;
					font-size: 26rpx;
					margin-left: 8rpx;
				}
			}
			
		}
		.head_text {
			background-color: #F8F8F8;
			color: #7C807F;
			padding: 32rpx 24rpx;
			font-size: 26rpx;
			border-radius: 24rpx;
			.left_box{
				width: 132rpx;
			}
			.right_box{
				width: 438rpx;
			}
			.sqName{
				font-size: 30rpx;
				color: #1B2120;
				margin-bottom: 8rpx;
				white-space: nowrap; /* 禁止换行 */
				overflow: hidden; /* 隐藏溢出内容 */
				text-overflow: ellipsis; /* 超出部分显示省略号 */
				width: 360rpx; /* 设置容器宽度 */
				
			}
		}

		.avatar {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}
	}
</style>